<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单预览示例</title>
    <meta name="format-detection" content="telephone=no"/>


    <!--使用webkit内核-->
    <meta name="renderer" content="webkit">
    <meta name="renderer" content="ie-stand">
    <!--避免IE使用兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=9" />

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <style>
        body{margin: 0;padding: 0}
        img{display: block;width: 100%;height: auto;}
    </style>
</head>
<body>

<div id="test">
    <img  src="./1.jpg">
    <img  src="./2.jpg">
    <div>
        <img  src="./3.jpg">
        <img  src="./4.jpg">
    </div>
    <img  src="./5.jpg">
    <img class="hide" src="./6.jpg">
</div>
</body>

<script src="./jquery-2.1.1.js"></script>
<script src="./fly-zomm-img2.0.js"></script>
<script>
    /**
     *
     *  1.新增imgQuality 图片质量类型 以前一直用 原图大小 现在增加 thumb,original 保存现在缩略图大小和采用原图大小
     */

    $(function (){
        $('#test').FlyZommImg({
            rollSpeed:200,//切换速度
            miscellaneous:true,//是否显示底部辅助按钮
            closeBtn:true,//是否打开右上角关闭按钮
            hideClass:'hide',//不需要显示预览的 class
            imgQuality:'thumb',//图片质量类型  thumb 缩略图  original 默认原图
            slitherCallback:function (direction,DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
//                   console.log(direction,DOM);
            }
        });
    });

    /**
     *  问题解决思路:
     *  1.我的点击事件不是触发或者多个触发怎么办?
     *    保持原有绑定,给除img外的触发绑定点击事件,事件的里面执行该触发下面的$(img).trigger("click");
     *  2.我使用了轮播插件,无缝轮播多出几个dom,图片数量多出重复?
     *     你可以尝试,在执行我的插件之前,找出多出来的dom,找出来之后在该dom的img上面添加隐藏的class
     *     配合参数使用 hideClass:'hide',//不需要显示预览的 class
     *
     */


</script>
</html>